<template>
    <div class="cattop">
        <van-row>
            <van-col span="8">
                <div class="iconleft">
                    <img src="../../assets/tub.png" alt="" width="35" height="35" class="tub">
                    <div class="ai">AI汽车汇</div>
                    <br></br>
                    <!-- <span style="color: rgb(204, 206, 208);font-size: 10px;">选车新车二手车</span> -->
                    <p style="color: rgb(204, 206, 208);font-size: 10px; float: inherit;">选车新车二手车</p>
                </div>
            </van-col>
            <van-col span="11">
                <van-icon name="search" class="icon" size="25px" @click="onSearch" />
            </van-col>
            <van-col span="5">
                <div class="rightapp" @click="onWell">
                    <p style="font-size: 13px;font-weight: 800; padding-top: 4px; padding-left: 15px;">打开APP</p>
                    <!-- <br></br> -->
                    <p style="font-size: 10px; padding-left: 15px;">无亿人使用</p>
                </div>
            </van-col>
        </van-row>
    </div>

    <!--点击图标弹出弹出框-->
    <van-icon class="icons" name="apps-o" size="40px" @click="showPopup" />
    <!-- tab标签 书写头部导航-->
    <van-tabs v-model:active="active">

        <van-tab v-for="(item, index) in tabsdata" :key="index" :title="item.name">
            <!-- 内容 {{ index }} -->
            <Selected v-if="index === 0"></Selected>
            <Local v-if="index === 1"></Local>
            <NewCat v-if="index === 2"></NewCat>
            <Original v-if="index === 3"></Original>
            <lookvidecat v-if="index === 4"></lookvidecat>
        </van-tab>

    </van-tabs>

    <!-- 底部弹出 -->
    <van-popup v-model:show="showBottom" closeable round z-index="100" position="bottom" :style="{ height: '60%' }">
        <h4 style="text-align: center; margin-top: 8px;">全部频道</h4>
        <!-- 宫格模式 -->
        <van-grid :column-num="3" :border="false" gutter="15" >
            <van-grid-item v-for="(item, index) in tabsdata" :key="item.id" :icon="item.icon" :text="item.name"
                @click="onClick(index)" />
        </van-grid>

    </van-popup>

    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="circle">车友圈</van-tabbar-item>
        <van-tabbar-item icon="bag-o">选车</van-tabbar-item>
        <van-tabbar-item icon="browsing-history-o">二手车</van-tabbar-item>
        <van-tabbar-item icon="friends-o" url="https://chat.deepseek.com/">服务</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Selected from '../../components/tabview/Selected.vue';
import Local from '../../components/tabview/Local.vue';
import NewCat from '../../components/tabview/NewCat.vue';
import Original from '../../components/tabview/Original.vue';
import Lookvidecat from '../../components/tabview/Lookvidecat.vue';
import { CatModelApi } from '../../api';
//路由跳转 引入用户路由跳转方法
import { useRouter } from 'vue-router';
//定义路由对象
const router = useRouter();

const active = ref(0)

// 标签的名称
const tabdata = ref(['精选', '本地', '新车', '原创', '视频看车', '导购', '行业', '用车'])
const tabsdata = ref([
    { id: 1, name: '精选', icon: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
    { id: 2, name: '本地', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 3, name: '新车', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 4, name: '原创', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 5, name: '视频看车', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 6, name: '导购', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 7, name: '行业', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 8, name: '用车', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
    { id: 9, name: '问答', icon: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' }


])
const onWell = () => {
    router.push('/downApp')
}
const onSearch = () => {
    router.push({ name: 'searchs' })
}
// 弹出层所需要的变量和函数
const showBottom = ref(false);
const showPopup = () => {
    showBottom.value = true;
};

//内容区点击跳转
const onClick = (index) => {
    console.log("点击成功！！！", index);
    active.value = index;
    showBottom.value = false;
}

</script>

<style scoped>
.cattop {
    width: 100%;
    height: 50px;
    background: url(../../assets/bgs.png) no-repeat;
    background-size: 100% 100%;
}

.tub {
    padding-top: 10px;
    margin-left: 10px;
    float: left;
}

.iconleft {
    /* display: flex;
    flex-direction: column; */
    width: 100%;
    float: left;

    .ai {
        float: left;
        color: white;
        font-size: 14px;
        font-weight: 800;
        padding-top: 10px;
        padding-left: 5px;
    }
}

.rightapp {
    width: 80px;
    height: 38px;
    background-color: #ffcc32;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 5px;
}

.icon {
    line-height: 50px;
    color: white;
    float: right;
}
.van-popup{
:deep(.van-grid-item__content) {
        background: #f1f1f3;
        height: 55px;
        width: 100px;
        border-radius: 13px;
    }
}

.icons{
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 10;
    cursor: pointer;
    background-color: aliceblue;
}

</style>